<style scoped>
  .strategy{
    padding-bottom: 60px;
  }
  .header{
    background: -webkit-linear-gradient(top left,#ED6174,#F89947);
  }
  .head{
    height:50px;
    display: flex;
    justify-content: center;
    align-items:center;
    box-sizing: border-box;
    padding-top: 16px;
  }
  .head-left{
    position: absolute;
    width:40px;
    height:100%;
    left:0;
    top:0;
    color: #7f7a8e;
    text-align: center;
  }
  .head-left h1{
    margin-top: 22px;
  }
  .head-left h1{
    color: #ffffff;
  }
  .head-middle{
    font-size: 16px;
  }
  .head-middle h3{
    color: #ffffff;
  }
  .head-right{
    position: absolute;
    right:10px;
    top:22px;
  }
  .head-right p{
    color: #ffffff;
    border:1px solid #ffffff;
    padding: 1px 10px;
    border-radius: 6px;
  }
  .header-b{
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .header-b>h1{
    color: #ffffff;
    font-size: 40px;
  }
  .header-b>p{
    color: #ffffff;
    margin-top: 4px;
  }
  .header-b>p:last-child{
    margin-bottom: 10px;
  }
  .middle ul{
    display: flex;
    flex-direction: row;
  }
  .middle ul li{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:10px 10px;
    border-right:1px solid #e9e9e9;
    box-sizing: border-box;
  }
  .middle ul li:last-child{
    border:none;
  }
  .middle ul li>h2{
    color: #FE7A4A;
  }
  .my-table{
    display: flex;
    width: 100%;
  }
  .my-table table{
    width: 100%;
  }
  .my-table thead{
    padding: 4px;
  }
  .my-table thead{
    border-bottom: 2px solid #e9e9e9;
  }
  .my-table thead tr th{
    color: #a4a3a9;
    padding:6px 0;
  }
  .my-table tbody tr{
    border-bottom: 1px solid #e9e9e9;
  }
  .my-table tbody tr td{
    text-align: center;
    padding: 8px;
  }
  .my-table tbody tr td:last-child p{
    background: #F7954A;
    color: #ffffff;
    border-radius: 6px;
    margin: 0 4px;
    padding:3px 0;
  }
</style>

<template>
  <div class="strategy">
    <div class="header">
      <div class="head" style="top: 0;z-index: 99999;position: fixed;width: 100%">
        <div class="head-left" @click="goBack"><h1 class="iconfont icon-xiangzuo1"></h1></div>
        <div class="head-middle" v-if="name.name"><h3>{{name.name}}</h3></div>
        <div class="head-middle" v-else><h3>{{name.country}}·{{name.index_name}}</h3></div>
        <div class="head-right" v-if="isShow"><p @click="cover">全部平仓</p></div>
      </div>
      <div class="header-b">
        <h1>${{allData.acc_profit | toFixed}}</h1>
        <p>累计盈利</p>
        <p>总市值 ${{allData.mv | toFixed}}</p>
      </div>
    </div>
    <div class="middle">
      <ul>
        <li>
          <h2>{{allData.dprofit | toFixed}}</h2>
          <p>今日盈利</p>
        </li>
        <li>
          <h2>{{allData.mprofit | toFixed}}</h2>
          <p>本月盈利</p>
        </li>
        <li>
          <h2>{{allData.yprofit | toFixed}}</h2>
          <p>本年盈利</p>
        </li>
      </ul>
    </div>
    <div class="my-table">
      <table align="center">
        <thead>
        <tr>
          <th>证券代码</th>
          <th @click="sortFunc('w')">占比
            <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.w">
              <svg class="icon"
                   aria-hidden="true">
                <use :xlink:href="triangleDown"></use>
              </svg>
            </i>
            <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.w">
              <svg class="icon"
                   aria-hidden="true">
                <use :xlink:href="triangleUp"></use>
              </svg>
            </i></th>
          <th @click="sortFunc('dprofit')">今日盈利
            <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.dprofit">
              <svg class="icon"
                   aria-hidden="true">
                <use :xlink:href="triangleDown"></use>
              </svg>
            </i>
            <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.dprofit">
              <svg class="icon"
                   aria-hidden="true">
                <use :xlink:href="triangleUp"></use>
              </svg>
            </i></th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(stock,index) in allData.stocks">
          <td><p>{{stock.s}}</p></td>
          <td><p>{{stock.w |percent}}</p></td>
          <td><p>{{stock.dprofit | toFixed}}</p></td>
          <td><p @click="closeStock(index)">平仓</p></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import host from '../config.js'
  import axios from 'axios'
  import income4 from '../assets/js/income4'
  import {Toast} from 'mint-ui'
  import { sort, sortControl } from '../plugins/sort'
  import { MessageBox } from 'mint-ui'

  export default {
    data () {
      return {
        allData: {
          acc_profit: null,
          dprofit: null,
          mprofit: null,
          mv: null,
          stocks: null,
          yprofit: null
        },
        strstegy: null,
        name: null,
        sortControl: {
          dprofit: 0,
          w: 0
        },
        triangleUp: '#icon-paixu',
        triangleDown: '#icon-paixu1',
        isShow: true
      }

    },
    mounted () {
      let getData = this.$route.query.id
      this.strstegy = getData
      this.name = JSON.parse(getData.split('&')[2])
//      console.log(JSON.stringify(this.name))
      let that = this

      axios({
        method: 'POST',
        headers: {'Authorization': window.localStorage.getItem('token')},
        url: host.host + "/api/trade/strategyMonitorDetail",
        data: {
          "robot": getData.split('&')[0],
          "strategy": getData.split('&')[1]
        }
      }).then(function (data) {
        if(data.data.code === 6006) {
          that.$router.push('/login')
        }
        if(data.data.code === 6007){
          that.$refreshToken()
        }
        if(data.data.code === 200) {
          if(data.data.data == undefined) {
            that.isShow = false
          }else{
            that.allData = data.data.data
          }
        }
      })
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      },
      cover () {
        let that = this
        MessageBox.confirm('确定全部平仓?').then(action => {
          axios({
            method: 'POST',
            headers: {'Authorization': window.localStorage.getItem('token')},
        url: host.host + "/api/trade/strategyClose",
          data: {
          "robot": this.strstegy .split('&')[0],
            "strategy": this.strstegy .split('&')[1]
        }
      }).then(function (data) {
        if(data.data.code === 6006) {
          that.$router.push('/login')
        }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200) {
            Toast({
              message: '平仓成功',
              duration: 1000
            })
            setTimeout(function(){
              that.$router.go(-1)
            },1000)
          }else if(data.data.code === 6033) {
            Toast({
              message: data.data.msg,
              duration: 1500
            })
          }
        })
      })
      },
      sortFunc (value) {
        Object.keys(this.sortControl).forEach((key) => {
          this.sortControl[key] = 0
      })
        this.sortControl = sortControl(this.sortControl, value)
        this.$nextTick(() => {
          this.allData.stocks = sort(this.allData.stocks, value, this.sortControl[value] === 1 ? 'sort' : 'reverse')
      })
      },
      closeStock(index) {
        let that = this
        let _thisStocks
//        for (let i = 0; i< this.allData.stocks.length; i++){
//          _thisStocks += this.allData.stocks[i].w
//        }
        axios({
          method: 'POST',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/trade/securityClose",
          data: {
            "robot": that.strstegy .split('&')[0],
            "strategy": that.strstegy .split('&')[1],
            "s": that.allData.stocks[index].s
          }
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200) {
            Toast({
              message: '平仓成功',
              duration: 1000
            })
            that.allData.stocks.splice(that.allData.stocks[index],1)
            let percent = 1 - that.allData.stocks[index].w
            for (let i = 0; i < that.allData.stocks.length; i++){
              that.allData.stocks[i].w = that.allData.stocks[i].w / percent
            }
          }else if(data.data.code === 6033) {
            Toast({
              message: data.data.msg,
              duration: 1500
            })
          }
        })
      }
    },
    filters: {
      percent (data) {
        if(data) {
          return (parseFloat(data) * 100).toFixed(2)
        } else {
          return 0
        }
      },
      toFixed (data) {
        if (data) {
          return (parseFloat(data)).toFixed(2)
        } else {
          return 0
        }
      }
    }
  }
</script>
